// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage
a,
.link {
  color: @link-color;
}
a:hover {
  color: @link-color-hover;
}
.widget {
  color: #fff;
  background: @link-color;
}

//选择器上使用
// Variables
@my-selector: banner;

// Usage
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
//url上使用
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

// @import

// Variables
@themes: "../../src/themes";

// Usage
// @import "@{themes}/tidal-wave.less";
@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

//属性中使用
@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}
//变量声明变量
@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}
//变量不需要提前声明
.lazy-eval {
  width: @var;
}

@var: @a;
@a: 9%;

//多次定义变量取最后定义. 从当前范围从下向上找
@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

//属性当做变量
.widget {
  color: #efefef;
  background-color: $color;
}
// 与变量一样，Less将选择当前/父范围内的最后一个属性作为“final”值。
.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 